<script setup lang="ts">
import { ref } from "vue";
import amazon from "./components/AmazonConvert.vue";
import home from "./components/home.vue";
import linkPage from "./components/link-page.vue";
import leftNav from "./components/left-nav.vue";
import validator from "./components/validator.vue";
import calculator from "./components/calculator.vue";
import compound from "./components/compound.vue";
import password from "./components/password.vue";
import md5 from "./components/md5.vue";
import qrcode from "./components/qrcode.vue";
import notebook from "./components/notebook.vue";
import todo from "./components/todo.vue";
import converter from "./components/timestampConverter.vue";
import regex from "./components/regex.vue";
import linux from "./components/linux.vue";
import git from "./components/GitCommandList.vue";
let page = ref("Home");
// 定义一个方法来处理从子组件接收到的navigate事件
function handleNavigate(newPage: string) {
  console.log('Navigated to:', newPage);
  page.value = newPage
}
</script>

<template>
  <main class="main-container">
    <div id="leftNav">
      <left-nav @navigate="handleNavigate"  style="height: 100%;"></left-nav>
    </div>
    <div id="rightContainer">
      <div v-if="page === 'Home'">
        <home></home>
      </div>
      <div v-if="page === 'Amazon'">
        <amazon></amazon>
      </div>
      <div v-if="page === 'Link'">
        <linkPage></linkPage>
      </div>
      <div v-if="page === 'Validator'">
        <validator></validator>
      </div>
      <div v-if="page === 'Services'">
        <p class="center-align">{{ page }}</p>
      </div>
      <div v-if="page === 'Calculator'">
        <calculator></calculator>
      </div>
      <div v-if="page === 'Compound'">
        <compound></compound>
      </div>
      <div v-if="page === 'Password'">
        <password></password>
      </div>
      <div v-if="page === 'Md5'">
        <md5></md5>
      </div>
      <div v-if="page === 'Qrcode'">
        <qrcode></qrcode>
      </div>
      <div v-if="page === 'Notebook'">
        <notebook></notebook>
      </div>
      <div v-if="page === 'Todo'">
        <todo></todo>
      </div>
      <div v-if="page === 'Converter'">
        <converter></converter>
      </div>
      <div v-if="page === 'Regex'">
        <regex></regex>
      </div>
      <div v-if="page === 'Linux'">
        <linux></linux>
      </div>
      <div v-if="page === 'Git'">
        <git></git>
      </div>
    </div>
  </main>
</template>

<style lang="scss" scoped>
  @use "./assets/common.scss";

  #leftNav {
    float: left;
    position: relative;
    width: 150px;
  }

  #rightContainer {
    float: right;
    position: relative;
    width: calc(100% - 150px);
  }
</style>